<template>
  <div>
    <div id="DirectoryTree-box">
      <div class="content">
        <h5>图层目录树</h5>
        <!-- 目录树 -->
        <el-tree
          :data="dataTree"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[100, 101]"
          :default-checked-keys="defaultKeys"
          @check-change="handleCheckChange"
          :props="defaultProps"
        ></el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import { docLayer } from '@/Hooks/initMap.js'

var docCatalog
export default {
  name: 'DirectoryTree',
  data() {
    return {
      defaultKeys: [],
      dataTree: [
        {
          id: 100,
          label: '地图文档',
          disabled: true,
          children: [
            {
              id: 101,
              label: '光谷智慧交通',
              disabled: true,
              children: []
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  created() {
    this.getTreeData()
    this.setDefaultKeys()
  },
  mounted() {},
  methods: {
    // 获取目录树数据并设置
    getTreeData() {
      // 获取地图信息
      docCatalog = new Zondy.Catalog.MapDoc({
        ip: 'localhost',
        port: 6163,
        docName: 'guanggu'
      })

      // 获取指定地图下所有图层的要素信息
      docCatalog.getLayersInfo((data) => {
        // 设置目录树数据
        data.value.forEach((item) => {
          this.dataTree[0].children[0].children.push({
            id: item.LayerIndex,
            label: item.Name
          })
          this.defaultKeys.push(item.LayerIndex)
        })
      })
    },
    setDefaultKeys() {
      setTimeout(() => {
        let stempKeys = this.defaultKeys.slice(0)
        this.defaultKeys = stempKeys
      }, 1000)
    },
    // 控制图层显隐
    handleCheckChange(data, checked) {
      if (checked) {
        // 获取原型上的doclayer，选择状态不能用show和hide，要用include和exclude
        docLayer.setLayerStatus(data.id, 'include')
      } else {
        // 没有选中状态
        docLayer.setLayerStatus(data.id, 'exclude')
      }
    },
    handleClick() {
      this.isShowTree = !this.isShowTree
    }
  }
}
</script>

<style scoped>
#DirectoryTree-box {
  position: absolute;
  top: 130px;
  right: 10px;
  z-index: 200;
  width: 200px;
  height: 380px;
  background: white;
}
.control-btn {
  position: absolute;
  top: 132px;
  left: 13px;
  width: 26px;
  height: 23px;
  z-index: 999;
  color: #fff;
  font-size: 1.14em;
  font-weight: 700;
  line-height: 0.4em;
  background: rgba(0, 60, 136, 0.5);
  border: none;
  border-radius: 2px;
}
.content h5 {
  padding: 5px 10px;
  color: white;
  text-align: center;
  background: #409eff;
}
</style>
